import React from 'react'
import PropTypes from 'prop-types'
import Todo from './Todo'

const TodoList = ({todos,toggleTodo,delTodo})=>(
    <ul>
        {
            todos.map((todo,index)=>(
                <Todo key={index} {...todo} onClick={()=>toggleTodo(index)} onDelClick={()=>delTodo(index)}/>
            ))
        }
    </ul>
)

TodoList.propTypes = {
    todos: PropTypes.arrayOf(
        PropTypes.shape({
            // id: PropTypes.number.isRequired,
            completed: PropTypes.bool.isRequired,
            text: PropTypes.string.isRequired
        }).isRequired
    ).isRequired,
    toggleTodo: PropTypes.func.isRequired,
    delTodo: PropTypes.func.isRequired,
}

export default TodoList